<template>
  <div class="accounts">
    <!-- 新增按钮 -->
    <el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark">
      
      
    </div>
    <!-- 条查 -->
    <div class="tiaocha">
    <el-form :inline="true" :model="form" class="demo-form-inline">
    <el-form-item label="账户名称">
              <el-select v-model="form.id" placeholder="请选择" size="mini"> 
                <el-option
                  v-for="item in userList"   
                  :key="item.id"
                  :label="item.accountName" 
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
    <el-form-item label="业务日期">
              <el-date-picker
                size="mini"
                v-model="dateRange"
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>      
  
  <el-form-item>
    <el-button type="primary" @click="search()" size="mini">查询</el-button>
    <el-button type="primary" @click="Reset()" size="mini">重置</el-button>
  </el-form-item>
</el-form>
 </div>
    </el-col>
</el-row>
    <!-- 表格 -->
      <el-col :span="24">
        <div class="grid-content bg-purple-light">
                 <el-table :data="tableData" stripe style="width: 100%">

      <el-table-column prop="accountName" label="账户名称" width="auto">
      </el-table-column>
      <el-table-column prop="institutionType" label="机构类型" width="auto">
        
      </el-table-column>
      <el-table-column prop="institutionName" label="机构名称" width="auto">
      </el-table-column>
      <el-table-column prop="account" label="账号" width="auto">
      </el-table-column>
      <el-table-column prop="openingBalance" label="初期余额" width="auto">
      </el-table-column>
     <el-table-column prop="tflow.revenueMoney" label="本期收款" width="auto">
      </el-table-column>
     <el-table-column prop="tflow.outlayMoney" label="本期付款" width="auto">
      </el-table-column>
                                 
    </el-table>
             <!-- 分页 -->
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="pageNum"
                      :page-sizes="[2, 5, 10, 20]"
                      :page-size="pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total"
                    >
                    </el-pagination>
         </div>
        </el-col>
    </el-row>
  
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "accounts",
  data() {
    return {
         //日期
      dateRange: [],
         //下拉列表框
      userList: [],
      tableData: [],
      //分页
      pageNum: 1,
      pageSize: 5,
      total: 0,
      form: {
            startTime: "",
        endTime: "",
        id:"",
        accountName: "",
      },
    };
  },
  created() {
    this.search();
    this.searchholiList();
  },
  methods: {
     //下拉列表框
    searchholiList() {
      axios
        .post("http://localhost:8030/Accounts/findOptions")
        .then((res) => {
          this.userList = res.data;
        })
        .catch((error) => {
          console.error("获取列表失败:", error);
        });
    },
    //重置按钮
    Reset() {
       (this.form.startTime = ""),
        (this.form.endTime = "");
      this.dateRange = [];
      (this.form.accountName = ""), this.search();
    },
      //条查 分页
    search() {
      if (this.dateRange.length == 0) {
        this.$http
          .post(
            "http://localhost:8030/Accounts/findAccountsPagination?pageNum=" +
              this.pageNum +
              "&pageSize=" +
              this.pageSize,
            this.form
          )
          .then((res) => {
            this.tableData = res.data.rows;
            this.total = res.data.total;
          });
      } else {
        this.form.startTime = this.dateRange[0];
        this.form.endTime = this.dateRange[1];
        this.$http
          .post(
            "http://localhost:8030/Accounts/findAccountsPagination?pageNum=" +
              this.pageNum +
              "&pageSize=" +
              this.pageSize,
            this.form
          )
          .then((res) => {
            this.tableData = res.data.rows;
            this.total = res.data.total;
          });
      }
    },
    // //条查 分页
    // search() {
    //   this.$http
    //     .post(
    //       "Accounts/findAccountsPagination?pageNum=" +
    //         this.pageNum +
    //         "&pageSize=" +
    //         this.pageSize,
    //       this.form
    //     )
    //     .then((res) => {
    //       this.tableData = res.data.rows;
    //       this.total = res.data.total;
    //     });
    // },
    //分页
    handleCurrentChange(val) {
      this.pageNum = val;
      this.search();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.search();
    },
  },
};
</script>

<style scoped>

</style>